@import "../../../assets/css/Master/index";

.NewVipCard {
  .Masterfun();

  .content {
    margin-bottom: 17rem;

    .header {
      font-size: 0;

      img {
        width: 100%;
        height: 15rem;
      }
    }

    .bodyer {
      position: relative;
      top: -2rem;
      left: 5%;
      z-index: 5;
      width: 90%;
      background-color: #fff;
      .show();

      .imgs {
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 7rem;
          height: 7rem;
          margin-top: -3.5rem;
          box-sizing: border-box;
          border: .5rem solid #fff;
          border-radius: 100%;
          background-color: #000;
        }
      }

      .nums {
        display: flex;
        width: 80%;
        margin: auto;
        margin-top: 1.8rem;
        justify-content: space-around;
        align-items: center;

        .div {
          div:first-child {
            font-size: 1.2rem;
            //font-weight: 900;
            color: @Master62;
          }

          div:last-child {
            color: @Master2A;
            margin-top: 1rem;
            font-size: @fontSize18;

            span {
              font-size: @fontSize12;
            }
          }

          //&:first-child{
          //  &:before {
          //  content: '';
          //  display: inline-block;
          //  width: 1px;
          //  height: 90%;
          //  border-right: 1px solid #111;
          //}
          //}
        }

        .bor {
          width: 1px;
          height: 2em;
          border-right: 1px solid @MasterE6;
        }

        .title {
          font-size: @fontSize15;
          font-weight: 600;
          color: @Master2A;
          margin-top: .5rem;
        }

      }

      .desc {
        text-align: justify;
        margin: 2rem 3rem;
        font-size: @fontSize15;
        color: @Master2A;

        .imga {
          margin: .5rem 0;

          img {
            width: 1.7rem;
            height: 1.2rem;
          }
        }

        div {
          line-height: 3.3rem;

          span {
            border-bottom: 1px dashed @MasterC;
          }
        }
      }

      .btne {
        padding-bottom: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;

        p {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 10rem;
          height: 2.94rem;
          font-size: @fontSize12;
          color: @Master62;
          border: 1px solid @MasterE6;
          border-radius: 5rem;
          padding-left: 1rem;

          .icon-jinru {
            transform: scale(.5);
          }
        }
      }
    }

    .foot {
      margin-top: 3.5rem;
      width: 100%;
      position: relative;
      z-index: 5;
      background-color: #fff;

      .foots {
        position: fixed;
        left: 0;
        z-index: 20;
        bottom: 0;
        width: 100%;
        padding-bottom: 3rem;
        border-radius: .3rem;
        background-color: #fff;
        box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.1);

        .clos {
          text-align: right;
          margin-right: .6rem;

          i {
            color: @MasterC6;
            font-size: 1.5rem
          }
        }

        .texts {
          font-size: @fontSize15;
          color: @Master2A;
          width: 73%;
          margin: 0 auto;
          margin-top: 1rem;
          text-align: justify;
        }

        .title {
          color: @Master2A;
          display: flex;
          justify-content: center;
          align-items: center;

          i {
            display: inline-block;
            width: .5rem;
            height: .5rem;
            background-color: @MasterC;
            border-radius: 50%;
            margin-left: .8rem;
            margin-right: .8rem;
          }

          &:before {
            content: '';
            display: inline-block;
            width: 6rem;
            height: .1rem;
            margin-top: -.25rem;
            border-top: 1px solid @MasterC;
          }

          &:after {
            content: '';
            display: inline-block;
            width: 6rem;
            height: .1rem;
            border-top: 1px solid @MasterC;
          }
        }
      }
    }
  }

  .showShardPopup-enter-active {
    animation: changeForest ease-out .25s;
    -webkit-animation: changeForest ease-out .25s;
  }

  .showShardPopup-leave-active {
    animation: changeForestHide linear .15s;
    -webkit-animation: changeForestHide linear .15s;
  }

  @keyframes changeForest {
    0% {
      bottom: -16rem;
    }
    100% {
      bottom: 0rem;
    }
  }
  @-webkit-keyframes changeForest {
    0% {
      bottom: -16rem;
    }
    100% {
      bottom: 0rem;
    }
  }
  @keyframes changeForestHide {
    0% {
      bottom: 0rem;
    }
    100% {
      bottom: -16rem;
    }
  }
  @-webkit-keyframes changeForestHide {
    0% {
      bottom: 0rem;
    }
    100% {
      bottom: -16rem;
    }
  }
}
